<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            color: #212529;
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0;
        }

        header {
            background-color: #343a40;
            color: white;
            padding: 20px;
            text-align: center;
        }

        header h1 {
            margin: 0;
            font-size: 24px;
        }

        footer {
            background-color: #e9ecef;
            padding: 15px;
            text-align: center;
            font-size: 14px;
            color: #6c757d;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>ERP管理系统</h1>
        </header>
        
        <div class="main-layout">
            <!-- 左侧菜单 -->
            <nav class="sidebar">
                <ul>
                    <li><a href="#supplier" class="nav-link active" data-target="supplier">供应商管理</a></li>
                    <li><a href="#product" class="nav-link" data-target="product">商品管理</a></li>
                    <li><a href="#order" class="nav-link" data-target="order">订单管理</a></li>
                    <li><a href="#order-item" class="nav-link" data-target="order-item">订单明细管理</a></li>
                </ul>
            </nav>
            
            <!-- 右侧内容区域 -->
            <main class="content">
                <div id="supplier-section" class="content-section">
                    <h2>供应商管理</h2>
                    <div class="toolbar">
                        <button id="refresh-supplier-btn">刷新</button>
                        <button id="create-supplier-btn">创建供应商</button>
                    </div>
                    <table id="suppliers-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>供应商编码</th>
                                <th>供应商名称</th>
                                <th>联系人</th>
                                <th>联系电话</th>
                                <th>地址</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 供应商数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <div id="product-section" class="content-section hidden">
                    <h2>商品管理</h2>
                    <div class="toolbar">
                        <button id="refresh-product-btn">刷新</button>
                        <button id="create-product-btn">创建商品</button>
                    </div>
                    <table id="products-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>商品编码</th>
                                <th>商品名称</th>
                                <th>分类ID</th>
                                <th>单位</th>
                                <th>成本价</th>
                                <th>销售价</th>
                                <th>库存数量</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 商品数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <div id="order-section" class="content-section hidden">
                    <h2>订单管理</h2>
                    <div class="toolbar">
                        <button id="refresh-order-btn">刷新</button>
                        <button id="create-order-btn">创建订单</button>
                    </div>
                    <table id="orders-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>订单编号</th>
                                <th>供应商ID</th>
                                <th>总金额</th>
                                <th>订单日期</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 订单数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <div id="order-item-section" class="content-section hidden">
                    <h2>订单明细管理</h2>
                    <div class="toolbar">
                        <button id="refresh-order-item-btn">刷新</button>
                    </div>
                    <table id="order-items-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>订单ID</th>
                                <th>商品ID</th>
                                <th>数量</th>
                                <th>单价</th>
                                <th>小计</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 订单明细数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </main>
        </div>
    </div>
    
    <script src="js/app.js"></script>
</body>
</html>